<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue自定义指令</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="test1">
    <p v-upper-text="msg1"></p>
    <p v-upper-text="msg1"></p>
</div>

<div id="test2">
    <p v-lower-text="msg2"></p>
    <p v-lower-text="msg2"></p>
</div>
</body>
</html>
<script type="text/javascript">
    //自定义指令
    Vue.directive('upper-text',function (el,binding){
        console.log(el,binding)
        el.textContent = binding.value.toUpperCase();
    })

    const VM = new Vue({
        el: '#test1',
        data: {
            msg1: 'NBA I Love This Game'
        },
        directives: { //局部指令
            'lower-text'(el,binding) {
                el.textContent = binding.value.toLowerCase()
            }
        }
    })
    const VM2 = new Vue({
        el: '#test2',
        data: {
            msg2: 'Just Do It'
        }
    })
</script>